<template>
    <div class="elevensharecon">
        <div class="topnone">
            <header>
                <img :src="imgurl||'//common-1253410441.file.myqcloud.com/coverimg/20170621164206.png'"
                     alt="">
                <strong>{{nickname}} 喊你帮Ta助力</strong>
            </header>
        </div>
        <section class="showfriends">
            <div class="hbinfo">
                <dl>
                    <dd v-for="(item, key,index) in 5" :key="index">
                        <img :src="friends[item-1]?friends[item-1]['FaceUrl']||'//common-1253410441.file.myqcloud.com/coverimg/20170621164206.png':'//common-1253410441.file.myqcloud.com/activityimg/20171110191009.png'"
                             alt="助力">
                        <strong>{{friends[item-1]?friends[item-1]['Name']:'空缺'}}</strong>
                    </dd>
                </dl>

            </div>
            <p class="middletips">已有<strong>{{friends.length}}</strong>位好友助力</p>
            <button class="intivefriends" v-if="regseccess" @click="jumpdown"><strong>10元红包到账</strong><b>下载APP使用</b></button>
            <button class="intivefriends" @click="sharemobile=true" v-else="">帮ta助力</button>
        </section>
        <div class="blanknone"></div>
        <div class="introinfo">
            <p>
                <label>1</label>
                <span>帮忙助力的好友可获得10元奖励红包，下载APP可立即使用
                    <a class="buttondown" href="http://cp.lovedou.com/cmcp/">下载APP</a>
                </span>
            </p>
            <p>
                <label>2</label>
                <span>一位好友只可助力一次，最多可获5位好友助力</span>

            </p>
            <p>
                <label>3</label>
                <span>助力截止日期为2017年11月11日23:59</span>
            </p>
        </div>
        <div class="modelhelp" v-if="sharemobile">
            <section>
                <i @click="sharemobile=false"></i>
                <p class="phone"><input v-model="phone" placeholder="输入手机号" maxlength="11" type="text"></p>
                <p class="vcode"><input v-model="yzm" placeholder="验证码" maxlength="6" type="number">
                    <button :class="counting?'disable':''">
                        <span v-if="counting"><countdown v-model="counttime" @on-finish="timefinsh"
                                                         :start="counting"></countdown>s后重新获取</span>
                        <span v-else @click="getyzm">获取验证码</span>
                    </button>

                </p>
                <a href="javascript:;" @click="zc">确定</a>
                <span class="bspan">助力后您可以获得<strong>10</strong>元红包的奖励</span>
            </section>
        </div>
    </div>

</template>

<script>
    import {Toast, Countdown} from 'vux';
    import {getMytoken, getLogintoken} from '../../services/common';
    import {nativetonative} from '../../utils/otherfn';
    import {namesource, jumptype} from '../../utils/config/common';
    import axios from 'axios';
    import {isphone} from '../../utils/otherfn';
    export default {
        components: {
            Toast,
            Countdown
        },
        data() {
            return {
                sharemobile: false,
                EncryptUserID: null,
                phone: '',
                yzm: '',
                counttime: 60,
                counting: false,
                ucode: '',
                appCode: '',
                channel: '',
                friends: [],
                regseccess: false,
                nickname: '',
                imgurl: ''
            };
        },
        created() {
            this.getparams();
            this.getinfo();
            this.getname();
        },
        computed: {},
        methods: {
            getparams() {
                const {eid, appCode, channel}=this.$route.query;
                this.eid = eid;
                this.appCode = appCode;
                this.channel = channel;
            },
            getname: async function () {
                if(this.eid) {
                    const {data}= await axios.get(`/user/Handler.ashx?action=708&params={"EUserID":"${this.eid}"}`);
                    if(data && data.code === 0) {
                        this.nickname = data.data.NickName;
                        this.imgurl = data.data.FaceUrl
                    }
                }

            },
            jumpdown(){
                window.location.href = 'http://cp.lovedou.com/cmcp/';
            },
            getinfo: async function () {
                if(this.eid) {
                    const {data}= await axios.get(`/hd/Handler.ashx?action=1147&params={"ID":"${this.eid}"}`);
                    if(data && data.code === 0) {
                        this.friends = data.data;
                    }
                    else {
                        this.$vux.toast.show({
                            type: 'text',
                            text: data.msg
                        })
                    }
                }

            },
            getyzm: async function () {
                if(isphone(this.phone)) {
                    this.counting = true;
                    const {data} = await axios.get(`/user/Handler.ashx?action=704&params={"Mobile":"${this.phone}","TypeID":"1"}`);
                    console.log(data);
                    if(data && data.code === 0) {
                        this.ucode = data.data;
                    }
                }
                else {
                    this.counting = false;
                    this.$vux.toast.show({
                        type: 'text',
                        text: '手机号格式不对'
                    })
                }
            },
            timefinsh() {
                this.counting = false;
            },
            zc: async function () {
                const {data}=await axios.get(`/user/Handler.ashx?action=703&params={"UserName":"${this.phone}","ValidCode":"${this.yzm}","RandomGuid":"${this.ucode}","EUserID":"${this.eid}"}`, {
                    headers: {
                        appCode: this.appCode || '3',
                        channel: this.channel || 'td',
                        devicecode: "",
                        devicetype: 'h5',
                        version: ''
                    }
                });
                if(data && data.code === 0) {
                    this.$vux.toast.show({
                        text: '助力成功'
                    });
                    this.sharemobile = false;
                    this.regseccess = true;
                    this.getinfo();
                }

            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    .elevensharecon {
        height: 1594px;
        background: url(http://common-1253410441.costj.myqcloud.com/activityimg/20171106095712.png) no-repeat top center;
        background-size: contain;
    }

    .topnone {
        height: 288px;
        header {
            height: 200px;
            display: flex;
            align-items: center;
            padding-left: 50px;
            img {
                border-radius: 50%;
                width: 98px;
                height: 98px;
                margin-right: 25px;
            }
            strong {
                color: #fff;
                font-size: 36px;
                font-weight: bold;
            }
        }
    }

    .normalshwoinfo {
        height: 655px;
        .hbinfo {
            height: 424px;
            width: 540px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .tips {
                text-align: center;
                color: #fff;
                line-height: 1;
                strong {
                    margin-top: 40px;
                    font-size: 46px;
                    display: block;
                }
                b {
                    margin-top: 10px;
                    font-size: 36px;
                    display: block;
                }
            }
            .center {
                flex: 1;
                display: flex;
                aside {
                    width: 143px;
                    height: 143px;
                    border-radius: 50%;
                    align-self: center;
                    background: #f1eb86;
                    box-shadow: 0 5px 0 #c7b623;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    color: #c72a23;
                    line-height: 1;
                    i {
                        font-size: 36px;
                    }
                    strong {
                        font-size: 48px;
                    }
                }
            }
            .btn {
                height: 86px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #f1eb86;
                font-size: 36px;
            }
        }
        .middletips {
            font-size: 36px;
            text-align: center;
            color: #fff;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .intivefriends {
            width: 538px;
            height: 130px;
            background: linear-gradient(to bottom, #fdee77, #ffc915);
            border-radius: 20px;
            font-size: 42px;
            color: #740101;
            margin: 0 auto;
            display: block;
            text-align: center;
        }
    }

    .showfriends {
        height: 655px;
        .hbinfo {
            height: 424px;
            width: 540px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            dl {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-wrap: wrap;
                height: 300px;
                dd {
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    align-items: center;
                    width: 160px;
                    height: 140px;
                    img {
                        width: 78px;
                        height: 78px;
                        box-sizing: border-box;
                        border: 1px solid #f1eb86;
                        border-radius: 50%;
                        text-align: center;
                        line-height: 78px;
                        background: #e1e1e1;
                        color: #aaa;
                    }
                    strong {
                        font-size: 28px;
                        color: #fff;
                        line-height: 1;
                        margin-top: 16px;
                    }
                }
            }
        }
        .middletips {
            font-size: 36px;
            text-align: center;
            color: #fff;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            strong {
                color: #ffff00;
                font-weight: bold;
            }
        }
        .getmoney {
            font-size: 42px;
            text-align: center;
            color: #fff;
            margin-top: 70px;
            strong {
                font-weight: bold;
                color: #e04031;
            }
        }
        .intivefriends {
            width: 538px;
            height: 130px;
            background: linear-gradient(to bottom, #fdee77, #ffc915);
            border-radius: 20px;
            font-size: 42px;
            font-weight: bold;
            color: #740101;
            margin: 0 auto;
            display: block;
            text-align: center;
            strong {
                display: block;
                font-weight: bold;
                line-height: 1;
            }
            b {
                display: block;
                line-height: 1;
                font-size: 30px;
                margin-top: 8px;
            }
        }
    }

    .blanknone {
        height: 183px;
    }

    .winrecords {
        width: 584px;
        margin: 0 auto;
        color: #fff;
        display: flex;
        flex-direction: column;
        ul {
            flex: 1;
            li {
                width: 100%;
                height: 96px;
                box-sizing: border-box;
                border-top: 1px dashed #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 28px;
                &:first-child {
                    border-top: none;
                }
                span {
                    flex: 1;
                    align-items: center;
                    display: flex;
                    img {
                        width: 58px;
                        height: 58px;
                        margin-right: 16px;
                        border-radius: 50%;
                        display: inline-block;
                    }
                    strong {
                        align-self: center;
                    }
                }
            }
        }
        .checkmore {
            font-size: 32px;
            color: #fdff4d;
            background: none;
            font-weight: bold;
        }
    }

    .blanknoneruls {
        height: 204px;
    }

    .showfriends {

    }

    .introinfo {
        font-size: 26px;
        color: #fff;
        width: 664px;
        margin: 0 auto;
        box-sizing: border-box;
        padding: 34px 40px 0 30px;
        p {
            font-size: 26px;
            margin-top: 40px;
            font-weight: bold;
            &:first-child {
                margin-top: 0;
            }
            label {
                width: 30px;
                height: 28px;
                border-radius: 4px;
                background: #d2352a;
                display: inline-block;
                text-align: center;
                line-height: 30px;
                margin-right: 20px;
                float: left;
                margin-top: 4px;
            }
            span {
                display: flex;
                flex-direction: column;
                img {
                    width: 400px;
                    height: 200px;
                    display: block;
                    margin: 0 auto;
                    margin-top: 10px;
                }
                strong {
                    color: #d2352a;
                    text-align: center;
                    line-height: 90px;
                }
            }
            .buttondown {
                width: 537px;
                height: 74px;
                background: linear-gradient(to bottom, #fdee77, #ffc915);
                border-radius: 10px;
                font-size: 43px;
                color: #740101;
                font-weight: bold;
                margin-top: 20px;
                text-align: center;
                line-height: 78px;
            }
        }
    }

    .winrecordsmodal {
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        height: 100%;
        background: rgba(0, 0, 0, .6);
        div {
            position: relative;
            margin-top: 10%;
            i {
                position: absolute;
                width: 64px;
                top: 0;
                right: 60px;
                height: 64px;
            }
            img {
                width: 100%;
                display: block;
            }
        }

        section {
            background: #943da7;
            color: #fff;
            overflow: scroll;
            width: 664px;
            margin: 0 auto;
            box-sizing: border-box;
            border-radius: 12px;
            padding: 0 38px;
            max-height: 700px;
            ul {
                flex: 1;
                background: #943da7;
                li {
                    width: 100%;
                    height: 96px;
                    box-sizing: border-box;
                    border-top: 1px dashed #fff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 28px;
                    &:first-child {
                        border-top: none;
                    }
                    span {
                        flex: 1;
                        align-items: center;
                        display: flex;
                        img {
                            width: 58px;
                            height: 58px;
                            margin-right: 16px;
                            border-radius: 50%;
                            display: inline-block;
                        }
                        strong {
                            align-self: center;
                        }
                    }
                }
            }
        }
    }

    .modelhelp {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, .6);
        section {
            position: relative;
            margin: 0 auto;
            top: 20%;
            background: url(//common-1253410441.file.myqcloud.com/activityimg/20171108195943.png) no-repeat center;
            background-size: contain;
            width: 627px;
            height: 506px;
            text-align: center;
            i {
                position: absolute;
                width: 70px;
                height: 70px;
                right: 0;
                top: 0;
            }
            p {
                text-align: center;
                margin: 0 auto;
                display: flex;
                width: 504px;
                input {
                    flex: 1;
                    font-size: 36px;
                    box-shadow: inset 1px 1px 10px #ccc;
                    height: 80px;
                    border-radius: 12px;
                    width: 100%;
                    text-indent: 20px;
                }
            }
            .phone {
                padding-top: 78px;
            }
            .vcode {
                margin-top: 28px;
                input {
                    flex: 1;
                    margin-right: 10px;
                }
                button {
                    flex: 1;
                    background: linear-gradient(to bottom, #fdee77, #ffc915);
                    border-radius: 10px;
                    font-size: 36px;
                    color: #740101;
                    &.disable {
                        background: #ccc;
                    }
                }

            }
            a {
                background: linear-gradient(to bottom, #fdee77, #ffc915);
                border-radius: 10px;
                display: flex;
                text-align: center;
                align-items: center;
                justify-content: center;
                color: #740101;
                font-size: 36px;
                font-weight: bold;
                margin: 0 auto;
                width: 350px;
                height: 90px;
                margin-top: 54px;
            }
            .bspan {
                font-size: 30px;
                display: block;
                color: #fff;
                font-weight: bold;
                margin-top: 30px;
                strong {
                    font-weight: bold;
                    color: #ffcb1c;
                }
            }
        }
    }
</style>